<template>
    <div class="copy" style="z-index:1;">
        <span class="text" @mouseenter="mouseEnt" @mouseleave="mouseEnt">
            <slot></slot>
        </span>
    </div>
</template>

<script lang="ts" setup>
import { Notify } from "@/components/y-notify/script";
enum MouseType {
    ENTER = "mouseenter",
    LEAVE = "mouseleave"
}
const prop = defineProps({
    text: {
        type: String,
        default: ""
    },
});



/**鼠标移动事件 */
function mouseEnt(ent: MouseEvent) {
    const node = ent.target as HTMLElement;
    const rect = node.getBoundingClientRect();
    const x = rect.x + rect.width / 2;
    const y = rect.y + rect.height / 2;
    switch (ent.type) {
        case MouseType.ENTER:
            const p = addTipsElment();
            let ofy = 4;
            if (prop.text.length > 24) {
                ofy += 16;
            }
            p.style.left = `${rect.x}px`;
            p.style.top = `${y - rect.height * 2 - ofy * window.devicePixelRatio}px`;
            node.appendChild(p);
            if (x + p.clientWidth > window.innerWidth) {
                p.style.left = "";
                p.style.right = `${10}px`;
            }
            break;
        case MouseType.LEAVE:
            node.removeChild(node.getElementsByTagName("p")[0]);
            break;
    }
}
/**创建提示p元素 */
function addTipsElment() {
    const p = document.createElement("p");
    p.setAttribute("class", "tips");
    let str = prop.text;
    console.log(str,"strstrstr")

    if (str.length > 24) {
        let str1 = str.substring(0, 24);
        let str2 = str.substring(24);
        str = str1 + "<br/>" + str2;
    }
    p.innerHTML = str;
    return p;
}
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
